﻿@using MudBlazor.Internal
@using MudBlazor.Resources
@namespace MudBlazor
@inherits MudPicker<DateTime?>
@inject InternalMudLocalizer Localizer

@Render

@code {

    protected override RenderFragment PickerContent =>
    @<CascadingValue Value="@this" IsFixed="true">
        <MudPickerToolbar Class="mud-picker-datepicker-toolbar" ShowToolbar="@ShowToolbar" Orientation="@Orientation" PickerVariant="@PickerVariant" Color="@Color" @onmousedown:preventDefault="true">
            <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mud-button-year" OnClick="GoToSelectedYear">@GetFormattedYearString()</MudButton>
            <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mud-button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</MudButton>
        </MudPickerToolbar>
        <MudPickerContent>
            <div id="@_mudPickerCalendarContentElementId" class="mud-picker-calendar-content @($"mud-picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")" @onmousedown:preventDefault="true">
                @{
                    int dayId = 0; 
                    @if (_picker_month.HasValue && GetCulture().Calendar.GetYear(_picker_month.Value) == 1 && GetCulture().Calendar.GetMonth(_picker_month.Value) == 1)
                    {
                        dayId = -1;
                    }
                }
                @for (int displayMonth = 0; displayMonth < DisplayMonths; ++displayMonth)
                {
                    int tempMonth = displayMonth; //without local variable month names are wrong

                    <div class="mud-picker-calendar-container">
                        @if (tempMonth == 0 && CurrentView == OpenTo.Year)
                        {
                            <div id="pickerYears" class="mud-picker-year-container">
                                @for (int i = GetMinYear(); i <= GetMaxYear(); i++)
                                {
                                    var year = i;
                                    <div class="mud-picker-year" id="@(_componentId + year)" @onclick="@(async () => await OnYearClickedAsync(year))" @onclick:stopPropagation="true">
                                        <MudText Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@year</MudText>
                                    </div>
                                }
                            </div>
                        }
                        else if (tempMonth == 0 && CurrentView == OpenTo.Month)
                        {
                            var calendarYear = GetCalendarYear(PickerMonth ?? DateTime.Today);

                            <div class="mud-picker-calendar-header">
                                <div class="mud-picker-calendar-header-switch">
                                    @if (!FixYear.HasValue)
                                    {
                                        <MudIconButton aria-label="@Localizer[LanguageResource.MudBaseDatePicker_PrevYear, $"({calendarYear - 1})"]" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="mud-flip-x-rtl" />
                                        <button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true">
                                            <MudText Typo="Typo.body1" Align="Align.Center">@calendarYear</MudText>
                                        </button>
                                        <MudIconButton aria-label="@Localizer[LanguageResource.MudBaseDatePicker_NextYear, $"({calendarYear + 1})"]" Icon="@NextIcon" OnClick="OnNextYearClick" Class="mud-flip-x-rtl" />
                                    }
                                    else
                                    {
                                        <MudText Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</MudText>
                                    }
                                </div>
                            </div>
                            <div class="mud-picker-month-container">
                                @foreach (var month in GetAllMonths())
                                {
                                    <button type="button" aria-label="@GetMonthName(month)" disabled="@IsMonthDisabled(month)"
                                    class="mud-picker-month mud-button-root" @onclick="@(async () => await OnMonthSelectedAsync(month))" @onclick:stopPropagation="true">
                                        <MudText Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</MudText>
                                    </button>
                                }
                            </div>
                        }
                        else if (CurrentView == OpenTo.Date || tempMonth > 0)
                        {
                            <div class="@GetCalendarHeaderClasses(tempMonth)">
                                <div class="mud-picker-calendar-header-switch">
                                    @if (!FixMonth.HasValue)
                                    {
                                        <MudIconButton aria-label="@Localizer[LanguageResource.MudBaseDatePicker_PrevMonth, $"({GetMonthName((tempMonth - 1) % 12)})"]" Class="mud-picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="@OnPreviousMonthClick" />
                                        <button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true">
                                            <MudText Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</MudText>
                                        </button>
                                        <MudIconButton aria-label="@Localizer[LanguageResource.MudBaseDatePicker_NextMonth, $"({GetMonthName((tempMonth + 1) % 12)})"]" Class="mud-picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="@OnNextMonthClick" />
                                    }
                                    else
                                    {
                                        <MudText Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</MudText>
                                    }
                                </div>
                                <div class="mud-picker-calendar-header-day">
                                    @if (ShowWeekNumbers)
                                    {
                                        <div class="mud-picker-calendar-week">
                                            <MudText Typo="Typo.caption" Class="mud-picker-calendar-week-text"></MudText>
                                        </div>
                                    }
                                    @foreach (var dayName in GetAbbreviatedDayNames())
                                    {
                                        <MudText Typo="Typo.caption" Class="mud-day-label">@dayName</MudText>
                                    }
                                </div>
                            </div>
                            <div class="mud-picker-calendar-transition mud-picker-slide-transition">
                                <div class="mud-picker-calendar">
                                    @for (int week = 0; week < 6; week++)
                                    {
                                        int tempWeek = week;
                                        var firstMonthFirstYear = _picker_month.HasValue && GetCulture().Calendar.GetYear(_picker_month.Value) == 1 && GetCulture().Calendar.GetMonth(_picker_month.Value) == 1;

                                        @if (ShowWeekNumbers)
                                        {
                                            <div class="mud-picker-calendar-week">
                                                <MudText class="mud-picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</MudText>
                                            </div>
                                        }
                                        var wasMaxValue = false;
                                        @foreach (var day in GetWeek(tempMonth, tempWeek))
                                        {
                                            var tempId = ++dayId;

                                            @if ((tempId != 0 || !firstMonthFirstYear) && !wasMaxValue)
                                            {
                                                var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1);
                                                <button @key="@(!firstMonthFirstYear ? selectedDay : tempId)" type="button" style="--day-id: @(!firstMonthFirstYear ? tempId : tempId + 1);"
                                                        class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))"
                                                        @onclick="@(async () => { var d = selectedDay; await OnDayClickedAsync(d); })"
                                                        @onclick:stopPropagation="true"
                                                        onpointerover="@(async () => await HandleMouseoverOnPickerCalendarDayButton(!firstMonthFirstYear ? tempId : tempId + 1))"
                                                        disabled="@IsDayDisabled(selectedDay)">
                                                    <p class="mud-typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p>
                                                </button>
                                            }
                                            else
                                            {
                                                <button @key="0" type="button" disabled style="--day-id: 1;"
                                                        class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day">
                                                    <p class="mud-typography mud-typography-body2 mud-inherit-text"></p>
                                                </button>
                                            }
                                            wasMaxValue = day == GetCulture().Calendar.MaxSupportedDateTime;
                                        }
                                    }
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </MudPickerContent>
    </CascadingValue>;
}
